import React ,{useEffect,useState,useContext}from "react";
import axios from 'axios'

const GlobalContext=React.createContext()

function FilmItem(props){
    let {poster,name,filmId,synopsis,category}=props
    let imgStyle={
        float:'left',
        width:'120px'
    }
    const context=useContext(GlobalContext)
    return  <div style={{overflow:'hidden',marginBottom:'10px'}} key={filmId} onClick={()=>{
                context.changeInfo(synopsis)
            }}>
            <img src={poster} style={{...imgStyle}} alt={name}/>
            <div>
                <h3>{name}</h3>
                <span>类型：{category}</span>
            </div>
        </div>    
}

function FilmDetail(){
    let boxStyle={
        position:'fixed',
        background:'yellow',
        width:'300px',
        top:'50px',
        right:'50px',
        padding:'20px'
    }
    const context=useContext(GlobalContext)
    return <div style={boxStyle}>
            {context.info}
        </div>
}


export default function App(){
    const [filmList, setfilmList] = useState([]);
    const [info, setinfo] = useState('');
    useEffect(()=>{
        axios.get('/07test.json').then(res=>{setfilmList(res.data)})
    },[])
    return(
        <GlobalContext.Provider value={{
            info,
            changeInfo:(v)=>{
                setinfo(v)
            }
        }}>
            <div>
                {
                    filmList.map(item=><FilmItem {...item}/>)
                }
                <FilmDetail/>
            </div>
        </GlobalContext.Provider>
    )
}
